<template>
  <div class="home">
    <search></search>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <banner :bannerData="bannerData"></banner>
      <grid :gridData="gridData"></grid>
      <footers :footersData="footersData"></footers>
    </van-pull-refresh>
  </div>
</template>
<script>
import Search from "@/components/home/Search";
import Banner from "@/components/home/Banner";
import Grid from "@/components/home/Grid";
import Footers from "@/components/home/Footers";
// 导入网络封装模块
import { request } from "@/axios/request";
export default {
  name: "Home",
  data() {
    return {
      bannerData: [],
      gridData: [],
      footersData: {
        footer1: [],
        footer2: [],
        footer3: []
      },
      isLoading: false
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.count++;
      }, 1000);
    }
  },
  components: {
    Search,
    Banner,
    Grid,
    Footers
  },
  mounted() {
    request({
      url: "index/index"
    })
      .then(res => {
        this.bannerData = res.data.banner;
        this.gridData = res.data.channel;
        this.footersData.footer1 = res.data.brandList;
        this.footersData.footer2 = res.data.newGoodsList;
        this.footersData.footer3 = res.data.hotGoodsList;
        console.log(this.gridData);
      })
      .catch(err => {
        // console.log(err);
      });
  }
};
</script>
<style lang="less" scoped>
.home {
  margin-bottom: 50px;
}
</style>
